<template>
  <view>
    <view class="container">
      <u-navbar title="视频发布" title-size="36"></u-navbar>
      <view class="content">
        <view class="">
          <view class=""> 上传视频</view>
          <u-upload max-count="1" :action="action" :file-list="fileList"></u-upload>
        </view>
      </view>

      <view class="top">
        <p class="video-title">视频标题</p>
        <textarea
          class="text-area"
          name=""
          placeholder="请输入标题(5-48个字)"
          id=""
          cols="30"
          rows="10"
        ></textarea>
      </view>

      <view class="view-bar">
        <view class="view-item1" @click="onPicker('region')">
          <text class="need">*</text>
          <p>我的位置</p>
          <text v-if="rangeValue">{{ rangeValue.label }}</text>
          <text v-else style="color: #999999">选择位置</text>
          <u-icon style="margin-left: 10rpx" name="/static/img/more.png" size="15"></u-icon>
        </view>
        <view class="view-item1" @click="onPicker('selector')">
          <text class="need">*</text>
          <p>关联商品</p>
          <text v-if="rangeValue">{{ rangeValue.label }}</text>
          <text v-else style="color: #999999">关联商品</text>
          <u-icon style="margin-left: 10rpx" name="/static/img/more.png" size="15"></u-icon>
        </view>
      </view>
    </view>

    <view class="submit-btn btn"> 立即发布</view>

    <u-picker
      :mode="mode"
      v-model="show"
      :range="range"
      @confirm="confirmSelctor"
      range-key="label"
    ></u-picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      mode: 'selector',
      show: false,
      checked: false,
      rangeValue: '',
      region: '',
      range: [
        {
          label: '全场包邮',
          id: 1
        },
        {
          label: '满100包邮',
          id: 2
        }
      ],
      action: 'http://',
      fileList: []
    }
  },
  methods: {
    confirmSelctor(e) {
      if (this.mode == 'selector') {
        this.rangeValue = this.range[e]
      } else {
        this.region = e
      }
    },
    onPicker(e) {
      this.mode = e
      this.show = true
    },
    routeTo(url) {
      uni.navigateTo({
        url
      })
    }
  }
}
</script>

<style>
@import url(../../style/btn.css);

page {
  background-color: #f2f2f2;
  font-size: 30rpx;
}

.top {
  background-color: #fff;
  margin-bottom: 20rpx;
  padding: 20rpx;
}

.video-title {
  margin-bottom: 15rpx;
}

.text-area {
  width: 100%;
  height: 120rpx;
  background-color: #f2f2f2;
}

.need {
  color: red;
}

.view-item1 {
  display: flex;
  align-items: center;
  padding: 20rpx;
  border-bottom: 2rpx solid #ededed;
}

.view-item1 p {
  flex: 1;
}

.view-item1 .title {
  flex: 2;
}

input {
  flex: 8;
}

.view-bar {
  background-color: #fff;
  margin-bottom: 20rpx;
}

.floor {
  padding: 20rpx;
  background-color: #fff;
}

.content {
  padding: 20rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
}

.container {
  padding: 20rpx;
}

.floor-tip {
  display: flex;
  align-items: center;
  padding: 20rpx;
}

.btn {
  margin-left: 20rpx;
}
</style>
